<template>
  <div class="ask-item bgc-fff">
    <div class="item-head">
      <img :src="face" alt>
      <div class="head-title">
        <div class="head-name">{{nickname}}</div>
        <div class="head-time">{{createTime}}</div>
      </div>
      <!-- 评论，点赞 -->
      <div :class="'head-zan ' +(haslikex? 'active':'')" v-if="likeNumx || likeNumx===0" @click="getAskLikex">
        <i class="icon icon16 zan-icon"></i>{{likeNumx}}
      </div>
      <div class="head-huifu" v-if="likeNumx || likeNumx===0" @click="toReply({aid:aid, pid:id, puid:uid, root_id:0, type:'replySubmit'})">
        <i class="icon16 huifu-icon"></i>回复
      </div>
    </div>

    <div :class="'item-content '+(viewType == 'two'?'two':'')">
      <div class="content-info mb12 richText" v-html="content"></div>
      
      <div class="content-reply" v-if="reply.length>0" :style="hasExpand ? 'padding-bottom:.38rem;':''">
        <ul>
          <li
            v-for="(item, index) in reply"
            :key="item.id"
            v-if="index<limited"
            @click="toReply({aid:aid, pid:item.id, puid:item.uid, root_id:id, type:'replySubmit'})"
          >   
              <!-- 一级回复或自己回复自己 -->
              <span class="bluecolor">{{item.nickname}}</span>
              <span v-if="item.uid!=item.puid && item.root_id!=0"><span>回复了{{item.p_nickname}}</span>: {{item.content}}</span>
              <span v-else><span></span>: {{item.content}}</span>
          </li>
        </ul>
        <p class="expand" @click="expand" v-show="hasExpand">
          展开余下
          <span class="bluecolor" >{{reply.length-3}}条</span>回复
          <i class="icon icon16 expand-icon"></i>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getAskLike } from "api/api";
export default {
  props: {
    // two 头像独占一列
    viewType: {
      type: String,
      default: ""
    },
    // 头像
    face: {
      type: String,
      default: ""
    },
    // 昵称
    nickname: {
      type: String,
      default: ""
    },
    // 创建时间
    createTime: {
      type: String,
      default: ""
    },
    // 内容
    content: {
      type: String,
      default: ""
    },
   
    
    // 评论 特有字段
    // 回复列表
    reply: {
      type: Array,
      default: () => []
    },
   /**
    * 回复icon、点击回复
    * 
    * 多级评论，依据当前id和uid去推论下面参数 
    * aid:     帖子的id
    * root_id: 评论加回复关系累加大于等于3层时，此时是评论id,小于3层则为0
    * pid:     上一级的id，可能是评论或回复，不可能是帖子
    * puid:    上一级用户的id
    */
    id: {
      type: Number,
      default: null
    },
    uid: {
      type: Number,
      default: null
    },
    aid: {
      type: Number,
      default: null
    },
    // 已赞
    haslike: {
      type: Number,
      default: null
    },
    // 点赞数
    likeNum: {
      type: Number,
      default: null
    },
    // 是否可以回复
    isAnswerAuthority: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      limited: 3, // 有限定条数，dom里面也写死了
      haslikex: null,
      likeNumx: null,
      onereq: true
    };
  },
  created(){
    // this.likeNumx，1.点赞和回复 允许没有，2.方便逻辑写在组件内部
    if( this.likeNum || this.likeNum===0 ){
      this.haslikex = this.haslike;
      this.likeNumx = this.haslike
    }
  },
  computed: {
    // ...mapState(["img_url"]),
    hasExpand(){
      return this.limited==3 && this.reply.length-3>0
    }
  },
  methods:{
    expand(){
      this.limited=100000;0
    },
    getAskLikex(){
      if (this.onereq) {
        this.onereq = false;
      } else {
        return;
      }
      let state = this.haslikex===0 ? 1 : 0;
      getAskLike({
        itemid: this.id,
        state: state
      }).then(res => {
        this.onereq = true;
        this.haslikex=state;
        if( state===0 ){
          this.likeNumx--;
        }else{
          this.likeNumx++;
        }
      }).catch(err => {
        this.onereq = true;
      });
    },
    toReply(query){
      if(this.isAnswerAuthority==1){
        this.$router.push({ name: 'AskReply', query: query});
      }else{
        this.$messageBox.confirm('',{
          title: '提示',
          message: '需要购买课程才能评论哦，点击“去购买”按钮立即购买吧~',
          confirmButtonText: '去购买'
        }).then(action => {
          this.$router.push({name: 'CommonOrderSubmit', query: { type:'course', id:this.id }});
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
// 从问答组件分离出来的 问答样式没有删除 方便扩展和合并
.ask-item {
  .item-head {
    display: flex;
    position: relative;

    > img {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
      flex: none;
    }

    // name time
    .head-title {
      margin-left: 0.1rem;
      width: 100%;
      .head-name {
        font-size: 0.14rem;
        font-weight: 500;
        color: rgba(48, 49, 51, 1);
        line-height: 0.2rem;
      }
    }
    .head-time {
      font-size: 0.12rem;
      font-weight: 500;
      color: rgba(144, 147, 153, 1);
      line-height: 0.17rem;
    }
  }

  .head-jinghua {
    position: absolute;
    right: 0;
    top: 0;
  }
  .head-huifu {
    position: absolute;
    top: 0.1rem;
    right: 0;
    font-size: 0.11rem;
    color: rgba(144, 147, 153, 1);
    line-height: 0.21rem;
    display: flex;
    align-items: center;
    .huifu-icon {
      margin-right: 0.02rem;
    }
  }
  // 点赞数
  .head-zan {
    position: absolute;
    top: 0.1rem;
    right: 0.64rem;
    font-size: 0.11rem;
    color: rgba(144, 147, 153, 1);
    line-height: 0.21rem;
    display: flex;
    align-items: center;
    .zan-icon {
      background: url("../../assets/images/like-icon.png") no-repeat center/cover;
      vertical-align: middle;
      margin-right: 0.02rem;
    }
    &.active {
      color: #f56c6c;
      .zan-icon {
        background: url("../../assets/images/like-icon-2.png") no-repeat center/cover;
      }
    }
  }

  // 评论数
  .head-commentNum2 {
    font-size: 0.12rem;
    font-weight: 500;
    color: #909399;
    line-height: 0.17rem;
    position: absolute;
    top: 0.1rem;
    right: 0;
  }
}

.item-content {
  margin-top: 0.06rem;
  &.two {
    margin-left: 0.5rem;
  }
  // 内容
  .content-info {
    word-break: break-all;
    color: #606266;
    line-height: 0.22rem;
    word-break: break-all;
    // 针对富文本处理，老师后台回复是富文本
    p {
      color: #606266;
      line-height: 0.22rem;
      word-break: break-all;
    }
  }
  // 上传图片
  .content-img {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    > img {
      width: 1.08rem;
      height: 1.08rem;
      border-radius: 0.02rem;
      margin-bottom: 0.12rem;
    }
  }
  // 评论数
  .content-commentNum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 0.12rem;
      font-weight: 500;
      color: #909399;
      line-height: 0.17rem;
    }
    ._commentNum {
      position: relative;
      .huifu-icon {
        position: absolute;
        top: 0;
        right: 0.1rem;
      }
    }
  }
  // 多级回复
  .content-reply {
    background-color: #f6f6f6;
    color: #606266;
    padding: 12px;
    overflow: hidden;
    position: relative;
    li {
      font-size: 14px;
      margin-bottom: 6px;
      word-break: break-all;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .expand {
      font-size: 12px;
      width: 100%;
      height: 32px;
      display: block;
      position: absolute;
      background-color: #f6f6f6;
      bottom: 0;
      left: 12px;
    }
  }
}

.huifu-icon {
  background: url("../../assets/images/message.png") no-repeat center/contain;
}
.jinghua-icon {
  width: 0.32rem;
  height: 0.14rem;
  background: url("../../assets/images/jinghua.png") no-repeat center/contain;
}
.expand-icon {
  background: url("../../assets/images/arrow-top-icon.png") no-repeat center/cover;
  position: relative;
  top: 4px;
}
.bluecolor{
  color: #0486FE;
}
</style>
